<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style/reset.css" />
    <style>
        body {
            font-size: 14px;
            font-family: "Microsoft YaHei", "SimSun";
            background: url(images/bg_body.png) repeat-x #ecfbf4;
        }
        a {
            text-decoration: none;
        }
        a:hovor {
            text-decoration: underline;
            cursor: pointer;
        }
        .inner_c {
            width: 1000px;
            margin: 0 auto; 
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        #header {
            height: 80px;
            padding-top: 10px;
        }
        #header_logo img {
            margin-top: 10px;
            padding-right: 20px;
        }
        #header_title {
            margin-top: 20px;
            padding-left: 20px;
            border-left: 2px solid white;
            font-size: 27px;
            color: #f1f5fa;
        }
        #header_link a {
            color: #f1f5fa;
            font-size: 16px;
            padding: 0 20px;
        }
        nav {  
            background-color: #333;  
        }
        .nav-links {  
            list-style: none;  
            padding: 0;  
            margin: 0;  
            display: flex;
            height: 34px;  
            background-image: url('images/bg_nav.png');  
            background-repeat: repeat-x;
        }
        .nav-links li {  
            width: 9%;  
            text-align: center;  
        }
        .nav-links a {  
            color: #f1f5fa;  
            text-decoration: none;  
            display: block; 
            height: 100%;  
            line-height: 34px; 
        }
        .nav-links a:hover {  
            background-color: #555;
        }
        #banner {  
             text-align: center;  
        }
        #banner img {  
            width: 1000px;  
            height: 433px; 
        }  
        body {    
            font-family: Arial, sans-serif;    
            margin: 0;    
            padding: 0;    
        }    
            
        .inner_c {    
            display: flex;    
            justify-content: space-between;    
            padding: 20px;    
        }   
        .title {    
            background-image: url('images/bg_nav.png');    
            background-repeat: repeat-x;    
            height: 34px;    
            line-height: 34px;    
            padding: 0 10px;    
            position: relative;    
        }    
            
        .title span {    
            color: #fff;    
            font-weight: bold;    
        }    
            
        .title .more {    
            float: right;    
            color: #fff;    
            text-decoration: none;    
            margin-left: 10px;    
        }    
            
        #news_img img {    
            width: 100%;    
            height: auto;    
        }    
            
        #news_content, #notice_content {    
            padding: 10px;    
            background-color: #f9f9f9;    
        }    
            
        #news_content ul, #notice_content ul {    
            list-style: none;    
            padding: 0;    
            margin: 0;    
        }    
            
        #news_content li, #notice_content li {    
            height: 29px;    
            line-height: 29px;    
            border-bottom: 1px dashed #ccc;    
            overflow: hidden;    
        }    
            
        #news_content a, #notice_content a {    
            width: calc(80% - 40px);    
            display: inline-block;    
            text-overflow: ellipsis;    
            overflow: hidden;    
            white-space: nowrap;    
            color: #333;    
            text-decoration: none;    
        }    
            
        #news_content span, #notice_content span {    
            width: 20%;    
            min-width: 85px;    
            text-align: right;    
            color: #0065d7;    
            display: inline-block;    
            margin-left: 10px;    
        }    
            
        #news_content a:hover, #notice_content a:hover {    
            background-color: #eee;    
        }
    </style>
</head>
<body>
    <div id="header" class="inner_c">
        <div id="header_logo" class="left">
            <img src="images/logo.png" alt="" />
        </div>
        <div id="header_title" class="left">计算机学院</div>
        <div id="header_link" class="right">
            <span><a href="">学校首页</a></span>
            <span>|</span>
            <span><a href="">联系我们</a></span>
        </div>
    </div>
    <div id="nav" class="inner_c">
        <ul class="nav-links">
            <li><a href="">首页</a></li>
            <li><a href="">学院简介</a></li>
            <li><a href="">专业介绍</a></li>
            <li><a href="">实验室介绍</a></li>
            <li><a href="">师资队伍</a></li>
            <li><a href="">党建工作</a></li>
            <li><a href="">学生园地</a></li>
            <li><a href="">就业专栏</a></li>
            <li><a href="">资料下载</a></li>
            <li><a href="">科技竞赛</a></li>
            <li><a href="">IEET 认证</a></li>
        </ul>
    </div>
    <div id="banner" class="inner_c">
        <img src="images/banner1.png" alt="广告横幅">
    </div>
    <div id="contents" class="inner_c">  
        <div id="news" class="news-container">  
            <div class="title">  
                <span>学院动态</span>  
                <a href="#" class="more">更多</a>  
            </div>  
            <div id="news_img" class="left"><img src="images/news1.jpg" alt="新闻图片"></div>  
            <div id="news_content" class="right">  
                <ul>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                    <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题的</a><span>2023-01-01</span></li>
                   </ul> 
            </div>  
        </div>  
        <div id="notice" class="notice-container">  
            <div class="title">  
                <span>通知公告</span>  
                <a href="#" class="more">更多</a>  
            </div>  
            <div id="notice_content">  
                <ul>  
                    <ul>
                        <li><a href="">通知公告标题通知公告标题通知公告标题</span></a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题通知公告标题通知公告标题通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题通知公告标题通知公告标题通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题</a><span>2023-01-01</span></li>
                        <li><a href="">通知公告标题通知公告标题通知公告标题</a><span>2023-01-01</span></li>
                       </ul>  
                </ul>  
            </div>  
        </div>  
    </div>
    <div id="link_inner" class="inner_c"></div>
    <div id="link_outer" class="inner_c"></div>
    <div id="footer"></div>
</body>
</html>